<template>
    <CommonModal
        v-model="state.videoVisible"
        @handleOk="state.videoVisible=false"
        title=""
        @handleCancel="state.videoVisible=false;state.fullVideo={}"
        :width="960"
        :isFooter="false"
        class="alarm_content_modal"
        :closable = "true"
    >
        
        <div class="video_content">
            <!-- <img class="close" src="@/assets/images/close-modal.png" alt="" @click="state.videoVisible=false"> -->
            <div style="margin-bottom: 24px;">
                <span class="video_title">
                    {{ state.fullVideo.eqName }}
                </span>
                <span class="max_play_time" style="margin-right: '24px'" v-if="maxPlayTime">
                    (<span style="color: red">{{ maxPlayTime }} </span>
                    秒后停止播放)
                </span>
            </div>


            <div style="height: 500px;">
                <Jessibuca @ipCallOne = 'ipCallOne' :showClose = 'false' :playObj = 'state.fullVideo'></Jessibuca>
            </div>
            
        </div>
    </CommonModal>

    <IpCall ref="IpCallRef"></IpCall>
</template>

<script setup>

import { onMounted, reactive, ref ,defineOptions } from 'vue';
import Jessibuca from "@/components/Jessibuca/index.vue";
import { useVideoCountdown } from "@/hooks/useVideoCountdown.js";
import { getVideoPlayUrl } from "@/utils";
// 倒计时结束的回调 关闭全部
const countdownCallBack =()=>{
    state.fullVideo={};
    state.videoVisible=false
}
const {maxPlayTime, maxPlayTimeReset,maxPlayTimeClear  } = useVideoCountdown(countdownCallBack);

const state = reactive({
    videoVisible: false,
    fullVideo:{}
})
onMounted(()=>{
})
const showModal = (data) => {
    state.videoVisible = true;
    fullVideoOne({...data,playUrl: getVideoPlayUrl(data.eqCode)})
}
const fullVideoOne= (obj) => {
    // console.log('fullVideoOne','home');
    state.fullVideo = obj;
    state.videoVisible = true;
    maxPlayTimeReset();
}
const IpCallRef = ref();

const ipCallOne = (obj)=>{
    // console.log(obj,'IpCallRef.value');
    IpCallRef.value.showModal(obj)
}

defineExpose({showModal})
</script>
<style lang="less" scoped>
.video_content{
    position: relative;
    width: 100%;
    // height: 580px;
    // padding-bottom: 10px;
    .video_title{
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        line-height: 20px;
        margin-right: 20px;
    }
    // .close{
    //     position: absolute;
    //     top: -20px;
    //     right: -20px;
    //     width: 24px;
    //     height: 24px;
    //     cursor: pointer;
    // }
}
</style>
